<!--字典类型-->
<script setup lang="ts">
interface User {
  name: string;
  code: string;
  status: boolean;
}
const tableRowClassName = ({ row, rowIndex }: { row: User; rowIndex: number }) => {
  if (!row.status) {
    return "warning-row";
  } else {
    return "";
  }
};

import * as XLSX from "xlsx";
//import XLSX from 'xlsx-style';
import {
  getDictTypePage,
  getDictTypeForm,
  addDictType,
  updateDictType,
  deleteDictTypes,
} from "@/api/dict";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { DictTypePageVO, DictTypeQuery, DictTypeForm } from "@/api/dict/types";
import { Bottom, Close, CaretBottom } from "@element-plus/icons-vue";
defineOptions({
  name: "merchantList",
  inheritAttrs: false,
});

const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const drawer = ref(false);
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const input1 = ref("");
const centerDialogVisible = ref(false);
const centerDialogVisible2 = ref(false);
const centerDialogVisible3 = ref(false);
const centerDialogVisible4 = ref(false);
const centerDialogVisible5 = ref(false);
const centerDialogVisible6 = ref(false);
const centerDialogVisible7 = ref(false);
const centerDialogVisible8 = ref(false);
const centerDialogVisible9 = ref(false);
const centerDialogVisible10 = ref(false);
const centerDialogVisible11 = ref(false);
const centerDialogVisible12 = ref(false);
const centerDialogVisible13 = ref(false);
const centerDialogVisible14 = ref(false);
const centerDialogVisible15 = ref(false);
const testList = ref(false);
const queryParams = reactive<DictTypeQuery>({
  pageNum: 1,
  pageSize: 10,
});

//const dictTypeList = ref<DictTypePageVO[]>();

const dialog = reactive({
  title: "",
  visible: false,
});

const formData = reactive<DictTypeForm>({
  status: 1,
});
const formData2 = reactive<DictTypeForm>({
  status: 1,
});
/* 下拉多选 */
const handleItemClick = (operator: string): void => {
  // 处理下拉菜单项的点击事件，可以在这里执行相关逻辑
  console.log("Selected operator:", operator);
};
const rules = reactive({
  name: [{ required: true, message: "请输入字典类型名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入字典类型编码", trigger: "blur" }],
});
const rules2 = reactive({
  name2: [{ required: true, message: "请输入商户名称", trigger: "blur" }],
  code2: [{ required: true, message: "请输入正确的账号", trigger: "blur" }],
});
/** 查询 */
function handleQuery() {
  loading.value = true;
  getDictTypePage(queryParams)
    .then(({ data }) => {
      dictTypeList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/* 导出表格 */
function exportToExcel() {
  const data = [
    [
      "商户ID",
      "商户名称",
      "上级代理",
      "登录账号",
      "谷歌绑定",
      "商户余额",
      "冻结金额",
      "剩余预付",
      "上次登录时间",
      "上次登录地址",
    ],
    [
      "商户1",
      "M100001",
      "账户M100001",
      "谷歌:未绑定",
      "余额:￥0.00",
      "冻结:￥0.00",
      "￥779.20",
      "禁用",
      "",
    ],
  ];
  // 创建一个工作簿
  const ws = XLSX.utils.aoa_to_sheet(data);
  // 合并登录账号单元格，注意索引是从 0 开始的
  ws["!merges"] = [
    { s: { r: 0, c: 5 }, e: { r: 0, c: 6 } }, // 合并从第2行第3列到第3行第3列的单元格
    { s: { r: 0, c: 8 }, e: { r: 0, c: 9 } },
    { s: { r: 0, c: 11 }, e: { r: 0, c: 12 } },
  ];
  // 设置列宽，这里将所有列的宽度设置为20
  ws["!cols"] = Array(data[0].length).fill({ wch: 20 });
  const headerStyle = {
    alignment: {
      horizontal: "center",
    },
    font: {
      bold: true,
    },
  };

  ws["A1"].s = headerStyle;

  /*  for (let r = 0; r < data.length; r++) {
     console.log('1111')
     for (let c = 0; c < data[0].length; c++) {
       const cellRef = XLSX.utils.encode_cell({ r, c });
       console.log(cellRef)
       if (!ws[cellRef]) {
         ws[cellRef] = {};
         console.log("1111111111111")
       }
       ws[cellRef].s = {
         alignment: { horizontal: 'center', vertical: 'middle' }
       };
       console.log(ws[cellRef].s)
     }
   } */

  // 创建一个工作簿对象
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "商户列表");
  // 将工作簿导出为Excel文件
  XLSX.writeFile(wb, "exported_data.xlsx");
}

/* 导出提示框 */
const showConfirmDialog = (confirmCallback: () => void) => {
  const confirm = async () => {
    try {
      await this.$confirm("确定导出？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });

      // 用户点击了确认按钮
      confirmCallback();
    } catch (error) {
      // 用户点击了取消按钮或发生了其他错误
    }
  };

  return { confirm };
};

const handleConfirm = () => {
  // 在这里执行确认按钮被点击时的逻辑
  console.log("确认按钮被点击了");
  // 调用导出方法
  exportToExcel();
};

/* 重置密码 */
const open2 = () => {
  ElMessage({
    message: "密码重置成功",
    type: "success",
  });
};
const showConfirmDialog2 = (confirmCallback: () => void) => {
  const handleConfirm = async () => {
    try {
      await this.$confirm("确定导出？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });

      // 用户点击了确认按钮
      confirmCallback();
    } catch (error) {
      // 用户点击了取消按钮或发生了其他错误
    }
  };

  return { handleConfirm };
};

const handleResetPassword = async () => {
  // 在这里执行确认按钮被点击时的逻辑
  console.log("确认按钮被点击了");

  // 调用密码重置逻辑
  await resetPassword();

  // 密码重置成功后的操作
  open2();
  centerDialogVisible14.value = true;
};

const resetPassword = async () => {
  // 返回一个 Promise，在这里执行密码重置逻辑
  // 例如调用接口，使用 async/await 处理异步操作
};
/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

/** 行复选框选中  */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}

/**
 * 打开字典类型表单弹窗
 *
 * @param dicTypeId 字典类型ID
 */
function openDialog() {
  dialog.visible = true;
}

/** 字典类型表单提交 */
function handleSubmit() {
  dataFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      loading.value = false;
      const dictTypeId = formData.id;
      if (dictTypeId) {
        updateDictType(dictTypeId, formData)
          .then(() => {
            ElMessage.success("修改成功");
            closeDialog();
            handleQuery();
          })
          .finally(() => (loading.value = false));
      } else {
        addDictType(formData)
          .then(() => {
            ElMessage.success("新增成功");
            closeDialog();
            handleQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

/** 关闭字典类型弹窗 */
function closeDialog() {
  dialog.visible = false;
  resetForm();
}

/**  重置字典类型表单 */
function resetForm() {
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();

  formData.id = undefined;
  formData.status = 1;
}

/** 删除字典类型 */
function handleDelete(dictTypeId?: number) {
  const dictTypeIds = [dictTypeId || ids.value].join(",");
  if (!dictTypeIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deleteDictTypes(dictTypeIds).then(() => {
      ElMessage.success("删除成功");
      resetQuery();
    });
  });
}

const dictDataDialog = reactive({
  title: "",
  visible: false,
});

const selectedDictType = reactive({ typeCode: "", typeName: "" }); // 当前选中的字典类型

/** 打开字典数据弹窗 */
function openDictDialog(row: DictTypePageVO) {
  dictDataDialog.visible = true;
  dictDataDialog.title = "账号信息";
  /* 
    selectedDictType.typeCode = row.code;
    selectedDictType.typeName = row.name; */
}

/**  关闭字典数据弹窗 */
function closeDictDialog() {
  dictDataDialog.visible = false;
}

onMounted(() => {
  handleQuery();
});

const value = ref("");
const options = [
  {
    label: "启用",
    value: "1",
  },
  {
    label: "禁用",
    value: "2",
  },
];

const options2 = [
  {
    label: "=",
    value2: "1",
  },
  {
    label: ">",
    value2: "2",
  },
  {
    label: "<",
    value2: "3",
  },
  {
    label: ">=",
    value2: "4",
  },
  {
    label: "<=",
    value2: "5",
  },
];
const value2 = ref(options2.length > 0 ? options2[0].value2 : null);
/* 抽屉里面 */
const value3 = ref();
const options3 = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
];
const closeDrawer = () => {
  // 关闭抽屉
  drawer.value = false;
};

/* 静态表格字段 */
const dataList = ref([
  {
    name: "商户1",
    code: "M100001",
    status: true,
  },
  {
    name: "商户2",
    code: "M100002",
    status: false,
  },
  {
    name: "商户3",
    code: "M100001",
    status: true,
  },
  {
    name: "商户4",
    code: "M100002",
    status: true,
  },
  {
    name: "商户5",
    code: "M100001",
  },
  {
    name: "商户6",
    code: "M100002",
    status: true,
  },
  {
    name: "商户7",
    code: "M100001",
  },
  {
    name: "商户8",
    code: "M100002",
    status: true,
  },
  {
    name: "商户9",
    code: "M100001",
    status: true,
  },
  {
    name: "商户10",
    code: "M100002",
    status: true,
  },
]);
const handleSwitchChange = (row) => {
  const statusText = row.status ? "启用" : "禁用";
  ElMessage.success(`${statusText}成功`);
  // 这里可以添加状态切换的逻辑，例如发起请求等
  if (row.status === "禁用") {
    row.dimmed = true;
  } else {
    row.dimmed = false;
  }
};

/* 分页 */
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form
        ref="queryFormRef"
        :model="queryParams"
        :inline="true"
        style="display: flex; width: 100%"
      >
        <el-form-item label="" prop="name">
          <el-input
            v-model="queryParams.keywords"
            placeholder="商户ID/商户名称/登录账号"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="name">
          <el-input
            v-model="queryParams.keywords2"
            placeholder="代理ID/代理名称/登录账号"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="name" style="">
          <el-select v-model="value" clearable placeholder="状态" style="width: 75px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="name" style="display: flex; width: 180px">
          <el-select v-model="value2" style="width: 60px">
            <el-option
              v-for="i in options2"
              :key="i.value2"
              :label="i.label"
              :value="i.value2"
            />
          </el-select>
          <el-input
            v-model="queryParams.keywords3"
            type="number"
            placeholder="商户余额"
            clearable
            @keyup.enter="handleQuery"
            style="width: 95px"
          />
        </el-form-item>

        <el-form-item label="" prop="name" style="display: flex; width: 180px">
          <el-select v-model="value2" style="width: 60px">
            <el-option
              v-for="i in options2"
              :key="i.value2"
              :label="i.label"
              :value="i.value2"
            />
          </el-select>
          <el-input
            v-model="queryParams.keywords4"
            type="number"
            placeholder="预付余额"
            clearable
            @keyup.enter="handleQuery"
            style="width: 95px"
          />
        </el-form-item>

        <el-form-item style="width: 220px">
          <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
          <el-button type="primary" @click="handleQuery()"><i-ep-search />搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container" style="width: 100%">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div class="left" style="width: 840px; height: 40px">
            <span
              style="
                background-color: #e6fffb;
                color: #0897b3;
                border: 1px solid #87e8de;
                padding: 2px 3px;
                margin-right: 3px;
              "
              >商户数量：46</span
            ><span
              style="
                background-color: #fff0f6;
                color: #c41d7f;
                border: 1px solid #ffadd2;
                padding: 2px 3px;
                margin-right: 3px;
              "
              >商户总余额：₫1000000.00 + ₹9999823.00 + ¥2068627.00 + $50000.00</span
            ><span style="border: 1px solid lightgray; padding: 2px 3px"
              >商户总冻结金额：¥2200.00</span
            >
            <span
              style="
                background-color: #e6fffb;
                color: green;
                border: 1px solid lightgreen;
                padding: 2px 3px;
              "
              >总预付金额：₫300000.00 + ₹20000.00 + ¥304312.45 + $111112.00</span
            >
          </div>
          <div class="right" style="width: 300px">
            <el-button
              v-hasPerm="['sys:dict_type:add']"
              type="success"
              @click="drawer = true"
              ><i-ep-plus />新增</el-button
            >
            <el-button type="danger" :disabled="ids.length === 0" @click="handleDelete()"
              ><i-ep-delete />批量删除</el-button
            >
            <!--  <el-popconfirm title="单次最多导出5000条数据，确定导出？" width="300px;" @click="exportToExcel">
              <template #reference>
                <el-button type="primary" ><el-icon><Bottom /> </el-icon>导出</el-button>
              </template>
            </el-popconfirm> -->
            <el-popconfirm
              title="单次最多导出5000条数据，确定导出？"
              width="300px"
              @confirm="handleConfirm"
            >
              <template v-slot:reference="{ confirm }">
                <el-button type="primary" @click="showConfirmDialog(confirm)">
                  <el-icon> <Bottom /> </el-icon>导出
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </template>
      <el-table
        v-loading="loading"
        highlight-current-row
        :data="dataList"
        border
        class="tabs"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" min-width="55" />
        <el-table-column label="商户ID" prop="name" min-width="100" fixed />
        <el-table-column label="商户名称" prop="code" min-width="200" fixed>
          <!--  <template #default="scope">
            <div style="display: flex; align-items: center;">
              <span
                style="padding: 2px 10px; background-color: #e6f7ff; color: #1890ff; border: 1px solid #1890ff; margin-right: 10px;"
                @click="testList = true">测试</span>
              {{ scope.row.code }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column label="登录账号" prop="code" align="left" min-width="150">
          <template #default="scope">
            <div style="display: inline-grid">
              <span>账户：<span>M100001</span></span>
              <span>谷歌：<span style="color: gray">未绑定</span></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商户账户" prop="remark" align="left" min-width="200">
          <template #default="scope">
            <div style="display: flex; justify-content: space-between">
              <div style="display: inline-grid">
                <span style="color: orange; font-weight: bold"
                  >余额：¥<span>0.00</span></span
                >
                <span>冻结：¥<span>0.00</span></span>
              </div>
              <div class="right">
                <p style="color: #1890ff">提现</p>
                <div>
                  <el-dropdown
                    :hide-on-click="false"
                    :split-button="false"
                    class="no-border-dropdown"
                  >
                    <span class="el-dropdown-link" style="color: #1890ff">
                      ...<el-icon class="el-icon--right">
                        <CaretBottom />
                      </el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          ><span
                            style="
                              padding: 2px 8px;
                              background-color: #08b35b;
                              color: white;
                            "
                            @click="centerDialogVisible7 = true"
                            >充 值</span
                          >
                        </el-dropdown-item>
                        <el-dropdown-item
                          ><span
                            style="padding: 2px 8px; background-color: gray; color: white"
                            @click="centerDialogVisible8 = true"
                            >扣 除</span
                          >
                        </el-dropdown-item>
                        <el-dropdown-item
                          ><span
                            style="padding: 2px 8px; background-color: red; color: white"
                            @click="centerDialogVisible9 = true"
                            >冻 结</span
                          >
                        </el-dropdown-item>
                        <el-dropdown-item
                          ><span
                            style="
                              padding: 2px 8px;
                              background-color: #1890ff;
                              color: white;
                            "
                            @click="centerDialogVisible10 = true"
                            >解 冻</span
                          >
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="剩余预付" prop="remark" align="left" min-width="210">
          <template #default="scope">
            <div style="display: flex">
              <!-- <span>账户：M100001</span>
              <span>谷歌：<span >未绑定</span></span> -->
              <div
                class="refund"
                @click="centerDialogVisible = true"
                style="
                  width: 60px;
                  height: 30px;
                  border: 1px solid lightgray;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #08b35b;
                "
              >
                -退款
              </div>
              <div
                class="residue"
                style="
                  width: 100px;
                  height: 30px;
                  border-top: 1px solid lightgray;
                  border-bottom: 1px solid lightgray;
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  color: red;
                "
              >
                ￥779.20
              </div>
              <div
                class="remit"
                @click="centerDialogVisible2 = true"
                style="
                  width: 60px;
                  height: 30px;
                  border: 1px solid lightgray;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #1890ff;
                "
              >
                +打款
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="商户状态" min-width="100">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              inline-prompt
              active-text="启用"
              inactive-text="禁用"
              @change="handleSwitchChange(row)"
            />
          </template>
        </el-table-column>

        <el-table-column label="支付产品配置" prop="remark" align="left" min-width="220">
          <template #default="scope">
            <div style="display: flex">
              <el-button
                key="primary"
                type="primary"
                text
                bg
                size="small"
                style="
                  background-color: #e6f7ff;
                  color: #1890ff;
                  border: 1px solid #91d5ff;
                "
                @click="centerDialogVisible3 = true"
                >支付产品费率</el-button
              >
              <el-button
                key="primary"
                type="primary"
                text
                bg
                size="small"
                style="
                  background-color: #fff0f6;
                  color: #c41d7f;
                  border: 1px solid #ffadd2;
                "
                @click="centerDialogVisible4 = true"
                >支付通道分流</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="代付产品配置" prop="remark" align="left" min-width="220">
          <template #default="scope">
            <div style="display: flex">
              <el-button
                key="primary"
                type="primary"
                text
                bg
                size="small"
                style="
                  background-color: #e6fffb;
                  color: #0897b3;
                  border: 1px solid #87e8de;
                "
                @click="centerDialogVisible5 = true"
                class="product"
                >代付产品费率</el-button
              >
              <el-button
                key="primary"
                type="primary"
                text
                bg
                size="small"
                style="
                  background-color: #f0f5ff;
                  color: #5e39c7;
                  border: 1px solid #adc6ff;
                "
                @click="centerDialogVisible6 = true"
                >代付通道分流</el-button
              >
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column label="代理商ID" prop="remark" align="center" width="200" />-->
        <!--        <el-table-column label="代理商名称" prop="remark" align="center" width="200" />-->
        <el-table-column fixed="right" label="操作" min-width="150">
          <template #default="scope">
            <div style="display: flex">
              <!-- <el-button type="primary" link size="small" @click.stop="openDictDialog(scope.row)">登录</el-button> -->

              <el-popconfirm
                title="确定重置该商户密码?"
                width="230px"
                @confirm="handleResetPassword"
              >
                <template v-slot:reference="{ confirm }">
                  <el-button
                    type="primary"
                    link
                    size="small"
                    @click.stop="showConfirmDialog2(confirm)"
                    style="font-size: 16px"
                  >
                    重置密码
                  </el-button>
                </template>
              </el-popconfirm>

              <el-button
                v-hasPerm="['sys:dict_type:edit']"
                type="primary"
                link
                size="small"
                @click="centerDialogVisible11 = true"
                style="font-size: 16px"
                >编辑</el-button
              >
            </div>
            <div style="display: flex">
              <el-button
                type="primary"
                link
                size="small"
                @click="centerDialogVisible14 = true"
                style="font-size: 16px"
                >对接信息</el-button
              >
              <el-button
                v-hasPerm="['sys:dict_type:delete']"
                type="primary"
                link
                size="small"
                @click.stop="handleDelete(scope.row.id)"
                style="color: red; font-size: 16px"
                @click="centerDialogVisible13 = true"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
        layout="->,total, sizes, prev, pager, next, jumper"
      />

      <div class="demo-pagination-block" style="float: right">
        <div class="demonstration"></div>
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 抽屉新增 -->
    <el-drawer v-model="drawer" title="创建商户" :with-header="false">
      <el-form ref="" :model="formData2" :rules="rules2" label-width="80px">
        <p
          style="
            margin-top: -5px;
            font-size: 17px;
            font-weight: 400;
            display: flex;
            align-items: center;
            height: 50px;
            border-bottom: 1px solid lightgray;
          "
        >
          <el-icon @click="closeDrawer" color="gray" style="margin-right: 5px">
            <Close /> </el-icon
          >创建商户
        </p>
        <el-form-item
          label="商户名称"
          prop="name2"
          style="display: flex; align-items: center"
        >
          <el-input
            v-model="input1"
            class="w-50 m-2"
            size="large"
            placeholder="请输入商户名称"
            style="width: 300px"
        /></el-form-item>
        <el-form-item
          label="登录账号"
          prop="code2"
          style="display: flex; align-items: center"
        >
          <el-input
            v-model="input1"
            class="w-50 m-2"
            size="large"
            placeholder="请输入登录账号(4-20位字母或数字)"
            style="width: 300px"
        /></el-form-item>
        <el-form-item label="上级代理" prop="" style="display: flex; align-items: center"
          ><el-select
            v-model="value3"
            class="m-2"
            placeholder="请选择上级代理"
            size="large"
            style="margin-left: 12px; width: 300px"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /> </el-select
        ></el-form-item>
        <p
          style="
            display: flex;
            justify-content: flex-end;
            padding-top: 10px;
            position: fixed;
            bottom: 0px;
            right: 10px;
          "
        >
          <el-button @click="closeDrawer">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </p>
      </el-form>
    </el-drawer>

    <!-- 退款 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="从【Cop】退款"
      width="500px"
      align-center
    >
      <el-form ref="" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="币种" prop="name">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">人民币</el-radio>
            <el-radio :label="0">USDT</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="金额" prop="code">
          <el-input v-model="formData.code" placeholder="请输入人民币金额" />
        </el-form-item>
        <el-form-item label="退" prop="tui">
          <span style="font-size: 25px">Cop</span>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 6 }"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 打款 -->
    <el-dialog
      v-model="centerDialogVisible2"
      title="打款给【Cop】"
      width="500px"
      align-center
    >
      <el-form ref="" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="币种" prop="name">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">人民币</el-radio>
            <el-radio :label="0">USDT</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="金额" prop="code">
          <el-input v-model="formData.code" placeholder="请输入人民币金额" />
        </el-form-item>
        <el-form-item label="打给" prop="remit">
          <span style="font-size: 25px">Cop</span>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 6 }"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="centerDialogVisible2 = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 支付产品费率 -->
    <el-dialog v-model="centerDialogVisible3" title="支付产品费率" width="800px">
      <pay-product />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible3 = false">确定</el-button>
      </span>
    </el-dialog>

    <!-- 支付通道分流 -->
    <el-dialog v-model="centerDialogVisible4" title="支付通道分流" width="800px">
      <pay-channel />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible4 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible4 = false"> 确定 </el-button>
      </span>
    </el-dialog>
    <!-- 代付产品费率 -->
    <el-dialog v-model="centerDialogVisible5" title="代付产品费率" width="800px">
      <replace-product />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible3 = false"> 确定 </el-button>
      </span>
    </el-dialog>
    <!-- 代付通道分流 -->
    <el-dialog v-model="centerDialogVisible6" title="代付通道分流" width="800px">
      <replace-channel />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible6 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible6 = false"> 确定 </el-button>
      </span>
    </el-dialog>

    <!-- 充值 -->
    <el-dialog v-model="centerDialogVisible7" title="充值" width="550px">
      <recharge-item />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible7 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible7 = false"> 确认 </el-button>
      </span>
    </el-dialog>
    <!-- 扣除 -->
    <el-dialog v-model="centerDialogVisible8" title="扣除" width="550px">
      <deduct-item />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible8 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible8 = false"> 确认 </el-button>
      </span>
    </el-dialog>
    <!-- 冻结 -->
    <el-dialog v-model="centerDialogVisible9" title="冻结" width="550px">
      <freeze-item />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible9 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible9 = false"> 确认 </el-button>
      </span>
    </el-dialog>
    <!-- 解冻 -->
    <el-dialog v-model="centerDialogVisible10" title="解冻" width="550px">
      <unfreeze-item />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible10 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible10 = false">
          确认
        </el-button>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog v-model="centerDialogVisible11" title="商户配置：Cop" width="900px">
      <edit-card />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible11 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible11 = false">
          确认
        </el-button>
      </span>
    </el-dialog>

    <!-- 账户信息 对接信息 -->
    <el-dialog v-model="centerDialogVisible12" title="商户配置：Cop" width="900px">
      <edit-card />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible12 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible12 = false">
          确认
        </el-button>
      </span>
    </el-dialog>
    <!-- 删除商户 -->
    <el-dialog v-model="centerDialogVisible13" title="删除商户" width="500px">
      <delete-card />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="centerDialogVisible13 = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible13 = false">
          确认
        </el-button>
      </span>
    </el-dialog>

    <!-- 对接信息 -->
    <el-dialog v-model="centerDialogVisible14" title="账号信息" width="700px">
      <duijie-card />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button type="primary" @click="centerDialogVisible14 = false"
          >知道了</el-button
        >
      </span>
    </el-dialog>

    <!--重置密码-->
    <el-dialog v-model="centerDialogVisible15" title="账号信息" width="700px">
      <duijie-card />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button type="primary" @click="centerDialogVisible15 = false"
          >知道了</el-button
        >
      </span>
    </el-dialog>

    <!-- 通道名称 测试 -->
    <el-dialog v-model="testList" title="商户名称：test" width="700px">
      <test-pay2 />
      <span
        class="dialog-footer"
        style="margin-top: 20px; display: flex; justify-content: flex-end"
      >
        <el-button @click="testList = false">取消</el-button>
        <el-button type="primary" @click="testList = false"> 确认 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.app-container {
  height: 100%;

  .table-container {
    height: 100%;
    //background-color: pink;

    .tabs {
      height: calc(100vh - 270px);
      overflow-y: auto;
    }

    /*  .el-card__body {
      height: 100%;
    } */
  }
}
.refund:hover {
  cursor: pointer;
}

.remit:hover {
  cursor: pointer;
}

.demo-pagination-block + .demo-pagination-block {
  // margin-top: 5px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 10px;
}

.example-showcase .el-select-v2 {
  margin-right: 20px;
}

.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
::v-deep(.warning-row) {
  opacity: 0.5;
}
/* .product:hover{
  opacity: 0.5;
} */
</style>
